<!DOCTYPE html>
<html>
<head>
  <title>题库</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/container.css">
  <link rel="stylesheet" href="css/logined.css">
  <link rel="stylesheet" href="css/Q-bank.css">
  <link rel="stylesheet" href="css/page.css">
</head>
<body>
  <div class="container">
    <!--Header-Start-->
    <div class="header bgcabc flex item-center br14">
      <h1 class="logo">TabOJ</h1>
      <dd class="options w1200 clearfix">
        <dl class="functions">
          <dt><a href="home.html" id="home">首页</a></dt>
          <dt><a href="question-bank.html">题库</a></dt>
          <dt class="search">
              <input type="text" placeholder="搜索内容" id="searchQuestion">
              <input type="button" class="search-btn iconfont" onclick="search()" value="&#xe651;">
          </dt>
        </dl>
        <dl class="user fr clearfix" style="display: none;">
          <dt>
            <img src="images/default-user.png" width="300" height="300" class="user-pic" draggable="false" onerror="this.src='images/default-user.png'">
          <dt><a href="javascript:void(0);" id="username"></a></dt>
          <dt><a href="javascript:void(0);" onclick="exit()">退出登录</a></dt>
        </dl>
        <dl class="user fr clearfix" style="display: none;">
          <dt><a href="login.html"  target="_blank">登陆</a></dt>
          <dt class="register"><a href="register.html" target="_blank">注册</a></dt>
        </dl>
      </dd>
    </div>
    <!--Header-End-->
    <div class="question-bank flex w1200">
      <!--question-classify-list-Start-->
      <ul class="Q-classify-list flex fdc">
        <li class="on" id="on">总题库</li>
        <li>简单题</li>
        <li>中等题</li>
        <li>困难题</li>
        <li>已完成</li>
      </ul>
      <!--question-table-Start-->
      <div class="Q-table">
        <table class="active" id="classify01">
          <thead>
            <tr>
            <td>状态</td>
            <td>题目</td>
            <td>通过率</td>
            <td>难度</td>
           </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <table id="classify02">
          <thead>
            <tr>
            <td>状态</td>
            <td>题目</td>
            <td>通过率</td>
            <td>难度</td>
           </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <table id="classify03">
          <thead>
            <tr>
            <td>状态</td>
            <td>题目</td>
            <td>通过率</td>
            <td>难度</td>
           </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <table id="classify04">
          <thead>
            <tr>
            <td>状态</td>
            <td>题目</td>
            <td>通过率</td>
            <td>难度</td>
           </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <table id="classify05">
          <thead>
            <tr>
            <td>状态</td>
            <td>题目</td>
            <td>通过率</td>
            <td>难度</td>
           </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <!--question-table-End-->
        
      </div>
    </div>

    <!--Footer-Start-->
    <div class="footer bgcabc h60"></div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/page.js"></script>
  <script src="js/getUser.js"></script>
  <script src="js/getProblemList.js"></script>
  <script src="js/logout.js"></script>
  <script>
    var oUl = document.querySelector('.Q-classify-list');
    var aTable =document.querySelectorAll('.Q-table table');
    //获取节点下标
    function getElementsIdx(item) {
      var elements = item.parentNode.children;
      for(var i=0,len = elements.length;i<len;i++){
        if(elements[i]==item) {
          return(i);
        }
      }
    }
    //事件绑定与委托，切换表
    var index = 0;
    oUl.onclick = function(event){
      if(event.target.tagName.toLowerCase() == 'li'){
        console.log(event.target);
        oUl.children[index].className='';
        oUl.children[index].id='';
        aTable[index].className='';
        index=getElementsIdx(event.target);
        oUl.children[index].className='on';
        oUl.children[index].id='on';
        aTable[index].className='active';
        pageSearch();
      }
    }
  </script>
  
</body>
</html>